<template>
  <div>
    <bread class="filter">
    <h1>联系我们</h1>
    <div class="filter-block"><span class="el-icon-search icon"></span></div>
  </bread>
    <page-content isCard>
      <div class="guide-content">
        <el-row class="text-center">
          <el-col :span="8">
            <div class="content">
              <i class="el-icon-phone icon"></i>
              <p class="title">客户服务邮箱</p>
              <p class="message">在使用中有任何问题或者建议<br>可以点击右下角的按钮反馈给我们<br>同时您也可以发送邮件到以下邮箱：</p>
              <a href="mailto:service.aca@quickwis.com" class="account">service.aca@quickwis.com</a>
              <p class="message line30">我们会尽快回复并与您取得联系</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="content">
              <i class="el-icon-phone icon"></i>
              <p class="title">学院客服微信</p>
              <img src="~assets/qrcode.jpg" alt="" class="qrcode">
              <p class="message line24">
                扫码直接添加<br>
                或在微信中搜索客服「acagrid-XY」
              </p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="content">
              <i class="el-icon-phone icon"></i>
              <p class="title">专属客服电话</p>
              <p class="message">
                如果在使用中出现了比较紧急的情况<br>
                或者有急需解决的问题<br>
                您可以拨打以下的客服热线快速与我们联系
              </p>
              <a href="tel:400-860-8820" class="account">400-860-8820</a>
              <p class="message line30">工作时间：周一到周五09:00~18:00</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </page-content>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../help.scss';
  .guide-content {
    background-color: #F9FAFC;
    font-size: 16px;
    color: #5E6D82;
    .text-center {
      margin: 20px auto;
    }
    .content {
      display: inline-block;
      text-align: center;
      background: #FFFFFF;
      box-shadow: 0 0 18px 0 rgba(48,63,77,0.11);
      width: 300px;
      padding: 22px 0 52px;
      .icon {
        color: var(--color-primary-deep);
        font-size: 40px;
        padding: 40px;
        background-color: rgba(66,139,202,.05);
        border-radius: 50%;
      }
      .title {
        font-weight: bold;
        font-size: 20px;
        color: #475669;
        margin: 24px auto 17px;
      }
      .message {
        font-size: 14px;
        color: #8D99A9;
        line-height: 35px;
        &.line30 {
          line-height: 30px;
        }
        &.line24 {
          line-height: 24px;
        }
      }
      .qrcode {
        height: 122px;
        margin-bottom: 30px;
      }
      .account {
        font-weight: bold;
        font-size: 20px;
        color: #428BCA;
        margin: 18px auto 25px;
        display: inline-block;
      }
    }
  }
</style>
